
@import 'grid';
@import 'colors';
@import 'icons';

/* Functions */

@mixin box-shadow($params) {
    -webkit-box-shadow: $params;
    -moz-box-shadow:    $params;
    box-shadow:         $params;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

@mixin text-shadow($params) {
    text-shadow: $params;
}

/* end Functions */

/* Site defaults*/

$height-nav: 46px;
$height-nav-a-padding: 12px 12px;

$input-medium: $width-col-1 * 3;

/* end Site */

/* Fonts */
$font: 14px Open Sans, Arial,sans-serif;
$font-nav: Open Sans, sans-serif;
$font-nav-size: 16px;
$font-nav-weight: 300;

h4 {
    margin: 5px;
}

/* end Fonts*/

/* Buttons */

.btn {
    display: inline-block;
    background: $color-btn;
    color: $color-btn-text !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
    border: none;
    @include box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.4));
    &:hover {
        top: 1px;
        background: darken($color-btn, 10%);
    }
}

.btn-orange {
    @extend .btn;
    background: $orange;
    &:hover {
        background: darken($orange, 10%);
    }   

}

.btn-red {
    @extend .btn;
    background: $red;
    &:hover {
        background: darken($red, 10%);
    }   
}

.btn-blue {
    @extend .btn;
    background: $blue;
    &:hover {
        background: darken($blue, 10%);
    }
}

.btn-green {
    @extend .btn;
    background: $green;
    &:hover {
        background: darken($green, 10%);
    }   
}

.btn-grey {
    @extend .btn;
    background: $grey;
    &:hover {
        background: darken($grey, 10%);
    }   
}

/* end Buttons */

/* Inputs */

.form {
    margin: 8px 0;
    .form__group {
        display: block;
        margin-bottom: 10px;
        label {
            display: block;
            margin-bottom: 5px;
        }
    }
}


.form--horizontal {
    @extend .form;
    .form__group {
        label {
            display: inline-block;
            width: 100px;
            float: left;
            padding-top: 7px;
            
        }
    }
}

.input {
    width: $input-medium;
    height: 34px;
    border: 1px solid lighten(#000, 60%);
    padding: 8px;
    
    &:focus {
        @include box-shadow(0 0 5px $color-input);
        border: 1px solid $color-main;
    }
}

.input--medium {
    @extend .input;
}

.input--small {
    @extend .input;
    width: 150px;
}

.input--large {
    @extend .input;
    width: 450px;
}

.input-error {
    display: none;
    position: absolute;
}

/* end Inputs */

p {
    margin: 0;
}

.center {
    text-align: center;
}

h3 {
    margin: 0;
    padding: 10px 0;
    font-size: 1.2em;
    font-weight: 100;
}

.clear {
    clear: both;
}

.right {
    float: right;
}
html * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    text-shadow: none;
}

body {
    background: $color-body;
    padding-top: 10px;
    color: #333333;
    font: $font;
    line-height: 20px;
}

.wrapper {
    width: $width-site;
    margin: 0 auto;
    background: #FFFFFF;
    @include box-shadow(0px 0px 16px 0px rgba(50, 50, 50, 0.75));
    //@include border-radius(4px 4px 4px 4px);
}


.header {
    width: 100%;
    height: $height-nav;
    background: $color-nav;
    color: #FFFFFF;
    ul.header__nav {
        list-style: none;
        margin: 0;
        padding-left: 0;
        li {
            float: left;
            position: relative;
            text-align: center;
            a {
                display: block;
                text-decoration: none;
                color: $color-nav-link;
                font-family: $font-nav;      
                font-size: $font-nav-size;
                font-weight: $font-nav-weight;
                padding: $height-nav-a-padding;
                transition: all ease .2s;
                @include text-shadow(0 -1px 1px rgba(0, 0, 0, 0.3));
                &:hover {
                    //background: $color-nav-active;
                    text-decoration: underline;
                }
            }
            

            &.header__nav--active {
                background: $color-nav-active;
            }
        }
    }
    

    .header__nav--dropdown {
        //display: none;
        list-style: none;
    }
    
    ul.header__nav--right {
        @extend .header__nav;
        float: right;
        li {
            a {
                &:hover {
                    background: none;
                }
            }
            ul.header__nav--dropdown {
                position: absolute;
                display: none;
                left: -100;
                height: $height-nav;
                z-index: 1000;
                li {
                    display: block;
                    text-align: center;
                    background: $color-nav;
                    width: $width-col-2;
                    a {
                        display: block;
                        text-decoration: none;
                        color: $color-nav-link;
                        font-family: $font-nav;      
                        font-size: $font-nav-size;
                        font-weight: $font-nav-weight;
                        padding: $height-nav-a-padding;
                        transition: all ease .2s;
                        @include text-shadow(0 -1px 1px rgba(0, 0, 0, 0.3));
                        &:hover {
                            background: $color-nav-active;
                        }
                    }  
                }
            }
            &:hover {
                ul.header__nav--dropdown {
                    display: block;
                    //opacity: 1;
                    //visibility: visibile;
                }
            }
        }
    }
}


.content {
    position: relative;
    //min-height: 300px;
    padding: 10px;
    a {
        text-decoration: underline;
        color: $color-link;
        padding: 8px 0px;
    }

    ul.questions {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
            padding: 8px 10px;
            a {
                
            }
        }
    }
}

table.content__list {
    table-layout: fixed;
    margin-top: 5px;
    margin-bottom: 5px;
    thead {
        tr {
            border-bottom: 2px solid $color-table-border;
            th {
                padding: 8px 10px;
                background: $color-table-head;
                color: $color-table-head-font;
                font-weight: 600;
                border-right: 1px solid $color-table-border;
                text-align: left;
                &:first-child {
                    border-left: 1px solid $color-table-border;
                }
                &.no-border {
                    
                }
            }
            &:first-child {
                border-top: 1px solid $color-table-border;
            }
        }
    }

    tbody {
        
        tr {
            td {
                word-wrap: break-word;
                padding: 8px 10px;
                border-right: 1px solid $color-table-border;
                &:first-child {
                    border-left: 1px solid $color-table-border;
                }
            }
            &:nth-child(even) {
                background: $color-table-zebra;
            }

            &:last-child {
                border-bottom: 1px solid $color-table-border;
            }

            &:hover {
                background: $color-table-hover;
            }
            &.selected {
                background: $color-table-hover;
            }
        }
    }
}

table.content__teacherlist {
    @extend table.content__list;
    table-layout: auto;
    thead > tr > th:first-child {
        width: 15px;
    }
    tbody > tr:hover {
        background: #FFF;
    }
    tbody > tr:nth-child(even):hover {
        background: $color-table-zebra;
    }
}

.footer {

}